<template>
  <ul class="mui-table-view">
    <li class="mui-table-view-cell mui-media" v-for="item in newslist" :key="item.id">
        <!-- 因为item.id是表达式，所以必须在to前面加V-bind:to，否则无法解析地址 -->
      <router-link :to="'/home/newsinfo/' +item.id">
        <img
          class="mui-media-object mui-pull-left" :src="item.img_url"
        >
        <div class="mui-media-body">
            <h1>{{item.title}}</h1>
          <p class="mui-ellipsis">
              <span>{{item.add_time | dateFormat("YYYY-MM-DD HH:mm:ss")}}</span>
              <span>点击:{{item.click}}次</span>
          </p>
        </div>
      </router-link>
    </li>
  </ul>
</template>
<script>
import { Toast } from "mint-ui";
export default {
  data: function() {
    return {
      newslist: []
    };
  },
  created() {
    this.getNewsList();
  },
  methods: {
    getNewsList() {
      this.$http
        .get("api/getnewslist")
        .then(result => {
          if (result.body.status == 0) {
            this.newslist = result.body.message;
          } else {
            Toast("加载新闻列表失败！");
          }
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.mui-table-view .mui-media, .mui-table-view .mui-media-body{
    h1{
        font-size: 14px;
    }
   .mui-ellipsis{
       font-size: 12px;
       color: #226aff;
       display: flex;
       justify-content: space-between;
   }
}
</style>

